<!--
 * @Author: Haochen
 * @Date: 2021-12-07 19:09:39
 * @LastEditTime: 2021-12-11 16:58:21
 * @FilePath: \students-system\src\views\students\UpdateStudent.vue
-->
<!--
 * @Author: Haochen
 * @Date: 2021-12-03 17:56:11
 * @LastEditTime: 2021-12-06 20:26:05
 * @FilePath: \1203-studentsystem-1\src\components\UpdateStudent.vue
-->
<template>
  <div>
    <BreadCrumb />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改学生</span>
      </div>
      <div class="text item">
        <div class="box-content">
          <ul>
            <!-- // * 姓名 -->
            <li>姓名：<el-input v-model="studentData.name"></el-input></li>
            <!-- // * 年龄 -->
            <li>年龄：<el-input v-model="studentData.age"></el-input></li>
            <!-- // * 性别 -->
            <li>
              性别：<el-radio v-model="studentData.gender" label="男"
                >男</el-radio
              >&nbsp;
              <el-radio v-model="studentData.gender" label="女">女</el-radio>
            </li>
            <!-- // * 专业 -->
            <li>
              专业：
              <el-select v-model="studentData.subjectsId">
                <el-option
                  v-for="subject in subjects"
                  :key="subject._id"
                  :label="subject.name"
                  :value="subject._id"
                >
                </el-option>
              </el-select>
            </li>
            <!-- // * 班级 -->
            <li>
              班级：
              <el-select v-model="studentData.classesId">
                <el-option
                  v-for="subClass in classes"
                  :key="subClass._id"
                  :label="subClass.name"
                  :value="subClass._id"
                >
                </el-option>
              </el-select>
            </li>

            <!-- // * 确认按钮 -->
            <li>
              <el-button type="primary" @click="confirmUpdate()"
                >确认修改</el-button
              >
              <!-- <button>确认新增</button> -->
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
  <!-- <div class="side-box">
    <bread-crumb></bread-crumb>
    <h3>修改学生</h3>
    <ul>
      <li>姓名：<input type="text" v-model="studentData.name" /></li>
      <li>年龄：<input type="text" v-model="studentData.age" /></li>
      <li>
        性别：
        <input type="radio" v-model="studentData.gender" value="男" />
        <label for="">男</label>
        &nbsp;
        <input type="radio" v-model="studentData.gender" value="女" />
        <label for="">女</label>
      </li>

      <li>
        专业：
        <select v-model="studentData.subjectsId">
          <option :value="undefined" disabled>请选择专业</option>
          <option
            v-for="subject in subjects"
            :key="subject._id"
            :value="subject._id"
          >
            {{ subject.name }}
          </option>
        </select>
      </li>

      <li>
        班级：
        <select v-model="studentData.classesId">
          <option :value="undefined" disabled>请选择班级</option>
          <option
            v-for="subClass in classes"
            :key="subClass._id"
            :value="subClass._id"
          >
            {{ subClass.name }}
          </option>
        </select>
      </li>

      <li><button @click="confirmUpdate()">确认修改</button></li>
    </ul>
  </div> -->
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import BreadCrumb from '../../components/common/BreadCrumb.vue';
const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers('subjects');
const { mapActions: classesActions, mapState: classesState } =
  createNamespacedHelpers('classes');
const { mapActions: studentsActions, mapState: studentsState } =
  createNamespacedHelpers('students');

export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      studentData: {},
    };
  },
  created() {
    this.getStudentById();
    this.getSubjectsAsync();
    this.getClassesBySubId();
  },

  computed: {
    ...subjectsState({
      subjects: 'rows',
    }),
    ...classesState({
      classes: 'rows',
    }),
  },

  methods: {
    ...studentsActions(['getStudentsByIdAsync']),
    ...subjectsActions(['getSubjectsAsync']),
    ...classesActions(['getClassesBySubIdAsync']),

    async getStudentById() {
      const res = await this.getStudentsByIdAsync({
        _id: this.$route.params.id,
      });
      if (!res.code) {
        console.log(res.message);
      } else {
        this.studentData = res.data;
      }
    },

    async getClassesBySubId() {
      const studentData = await this.getStudentsByIdAsync({
        _id: this.$route.params.id,
      });

      this.getClassesBySubIdAsync({
        subjectsId: studentData.data.subjectsId,
      });
    },

    async confirmUpdate() {
      const { data: res } = await this.$api.students.updateStudent(
        this.studentData
      );
      if (res.code) {
        alert(res.message);
        this.studentData = {};
        this.$router.push('/home/StudentsList');
      } else {
        console.log(res.message);
      }
    },
  },

  watch: {
    'studentData.subjectsId'(newVal, oldVal) {
      if (oldVal) {
        this.studentData.classesId = 'undefined';
      }

      this.getClassesBySubIdAsync({
        subjectsId: this.studentData.subjectsId,
      });
    },
  },

  beforeRouteLeave(to, from, next) {
    // alert('确定离开');
    if (Object.keys(this.studentData).length > 0) {
      const isLeave = confirm('你还有数据未提交，确定离开吗？');
      if (isLeave) {
        next();
      }
    } else {
      next();
    }
  },
};
</script>

<style src="../../assets/css/common.css" scoped></style>
